<template>
  <view class="task-content" :class="isShow?'task-content-show':'task-hide'">
    <view class="task-box">
      <view class="task-title">
        恭喜您完成任务<br />
        领取一个福袋!
      </view>
      <view class="task-message">
        您可以在过大年页面查看已领取的福袋
      </view>
      <view class="task-button" @click="toIndex">
        好的，我知道了
      </view>
        <view class="task-close-item">{{endTime}}s后自动消失</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "new-year-task-pop",
  data() {
    return {
      isShow:false,
      endTime:5,
      isButton:false
    };
  },
  mounted() {
  },
  methods: {
    /**
     * 显示领取福袋弹框
     */
    async show(){
      let status = await this.getConfig()
      if(status){
        return new Promise((resolve, reject) => {
          this.isShow = true
          let timeObj = setInterval(()=>{
            this.endTime--
            if(this.endTime <= 0 || this.isButton){
              this.isShow=false
              clearInterval(timeObj)
              resolve(true)
            }
          },1000)
        })
      }
    },
    // 判断是否在活动内
    getConfig()
    {
      return new Promise(async (resolve, reject) => {
        let res = await this.$javaCircle.doRequest("post", "vs/festival/checkFestival", '', '', true)
        resolve(res.data.data.show)
      })
    },
    toIndex(){
      this.isButton = true
      // uni.switchTab({url: '/pages/sindex/index'})
    }
  }
}
</script>

<style lang="scss" scoped>
.task-content{
  width: 100vw;
  height: 0vh;
  overflow: hidden;
  background-color: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  z-index: 101;
  .task-box{
    margin-top: 300upx;
    width: 715upx;
    height: 762upx;
    background: url($uni-url+'/wxapp/newYearRecruit/bg_zhucechengg.png') 50% 50% / contain no-repeat;
    box-sizing: border-box;
    padding: 0 142upx;
    padding-top: 246upx;
    transform: scale(0);
    transition: transform .3s cubic-bezier(0, 0, 0.5, 1.49);
    .task-title{
      font-size: 58upx;
      color: #FF3333;
      text-align: center;
      line-height: 72upx;
      width: 100%;
      font-weight: 700;
    }
    .task-message{
      font-size: 44upx;
      color: #BA5B00;
      text-align: center;
      line-height: 62upx;
      width: 100%;
      font-weight: 500;
      margin-top: 18upx;
    }
    .task-button{
      margin-top: 26upx;
      width: 100%;
      height: 116upx;
      background: url($uni-url+'/wxapp/newYearRecruit/btn_bg.png') 50% 50% / contain no-repeat;
      line-height: 100upx;
      text-align: center;
      font-size: 36upx;
      color: #fff;
    }
    .task-close-item{
      width: 100%;
      text-align: center;
      font-size: 32upx;
      color: #BA5B00;
    }
  }
}
.task-content-show{
  height: 100vh;
  .task-box{
    transform: scale(1);
  }
}
</style>
